<!DOCTYPE html>
<html>
    <head>
        <title>Bookshelf</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-modeling.js"></script>  
        <script>                
                        
            ht.Default.setImage('book', '');           
            ht.Default.setImage('brick', '');
            ht.Default.setImage('earth', '');
            ht.Default.setImage('ben', '');
            ht.Default.setImage('ben1', '');
            ht.Default.setImage('ben2', '');
            ht.Default.setImage('ben12', {
                width: 100,
                height: 50,
                comps: [
                    {
                        type: 'image',
                        name: 'ben1',
                        rect: [0, 0, 50, 50]
                    },
                    {
                        type: 'image',
                        name: 'ben2',
                        rect: [50, 0, 50, 50]
                    }
                ]                
            });            
                        
            function init(){                                 
                dm = new ht.DataModel();                
                treeView = new ht.widget.TreeView(dm);                                                                                                 
                gv1 = new ht.graph3d.Graph3dView(dm);   
                gv2 = new ht.graph3d.Graph3dView(dm);   
                splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);   
                mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   
                
                view = mainSplit.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    mainSplit.invalidate();
                }, false);                         
              
                gv1.setMoveStep(30);
                gv1.setGridVisible(true); 
                gv1.setEye(0, 100, 1000);
                gv1.setCenter(0, 200, 0);
                gv1.pan(0, 100, true);
                gv1.getLabel = function(){
                    return null;
                };
                gv1.getBrightness = function(data){
                    return null;
                };
                gv1.setVisibleFunc(function(data){
                    if(data.showMe){
                        return true;
                    }
                    if(data instanceof ht.CSGNode && data.getHost()){
                        return false;
                    }
                    return true;
                });
                
                gv2.setMoveStep(30);
                gv2.setEditable(true);
                gv2.setGridVisible(true); 
                gv2.setEditable(true);
                gv2.pan(0, 200, true);
                gv2.getLabel = function(){
                    return null;
                };                
                
                initShelf1();                       
                initShelf2();                       
                initShelf3();                       
                
                treeView.expandAll();
                
                var angle = 0;
                setInterval(function(){
                    angle += Math.PI/40;
                    earth.r3(0, angle, 0);
                    photos.s('dw.angle', angle);
                }, 50);                 
            }            
            
            function initShelf1(){
                var shelf = new ht.CSGNode();
                shelf.s3(500, 400, 120);
                shelf.p3(0, 200, 0);
                shelf.setName('shelf1');
                shelf.s({
                    'all.color': '#E5BB77'
                });
                dm.add(shelf);
                
                for(var i=0; i<2; i++){
                    for(var j=0; j<5; j++){
                        var clipNode = new ht.CSGNode();
                        clipNode.setHost(shelf);
                        clipNode.s3(80, 100, 120);
                        clipNode.p3(-200+j*100, 340-i*120, 20);
                        clipNode.setName('substract-'+i+'-'+j);
                        clipNode.s('batch', 'tt');
                        clipNode.setParent(shelf);
                        dm.add(clipNode);
                    }
                }
                
                var leftNode = new ht.CSGNode();
                leftNode.setHost(shelf);
                leftNode.s3(23, 380, 100);
                leftNode.p3(-255, 200, 0);
                leftNode.setName('substract left');
                leftNode.setParent(shelf);
                dm.add(leftNode);
                
                var rightNode = new ht.CSGNode();
                rightNode.setHost(shelf);
                rightNode.s3(23, 380, 100);
                rightNode.p3(255, 200, 0);
                rightNode.setName('substract right');
                rightNode.setParent(shelf);
                dm.add(rightNode);
                
                var bottomNode = new ht.CSGNode();
                bottomNode.setHost(shelf);
                bottomNode.s3(480, 140, 140);
                bottomNode.p3(0, 80, 0);
                bottomNode.setName('substract bottom');
                bottomNode.setParent(shelf);
                dm.add(bottomNode);  
                
                var topNode = new ht.CSGNode();
                topNode.setHost(shelf);
                topNode.s3(480, 10, 100);
                topNode.p3(0, 400, 0);
                topNode.setName('union top');
                topNode.s('attach.operation', 'union');
                topNode.setParent(shelf);
                dm.add(topNode);  
                
                var book = new ht.Node();
                book.setName('CSS3: The Missing Manual');
                book.s3(60, 80, 8);
                book.p3(-100, 210, 20);
                book.r3(-Math.PI/6, Math.PI/5, 0);
                book.setIcon('book');
                book.s({
                    'front.image': 'book',
                    'back.color': 'white',
                    'left.color': 'white',
                    'all.color': 'gray'
                });
                book.setHost(shelf);
                book.setParent(shelf);
                dm.add(book);                                
                
            }
            
            function initShelf2(){                
                var shelf = new ht.CSGNode();
                shelf.s3(120, 240, 120);
                shelf.p3(0, 120, 0);
                shelf.setName('shelf2');
                shelf.s({
                    'all.color': '#805642',
                    'csg.color': 'yellow',
                    'csg.reverse.flip': true
                });
                dm.add(shelf);
                
                var clipNode = new ht.CSGNode();
                clipNode.setName('shelf2-substract-up');
                clipNode.s3(100, 100, 130);
                clipNode.p3(0, 180, 0);
                clipNode.setHost(shelf);
                clipNode.s('attach.cull', true);
                clipNode.setParent(shelf);
                dm.add(clipNode);
                
                clipNode = new ht.CSGBox();
                clipNode.setName('CSGBox-Expand-Left');
                clipNode.s3(100, 100, 120);
                clipNode.p3(0, 65, 0.1);
                clipNode.setHost(shelf);
                clipNode.showMe = true;
                clipNode.s({
                    'all.visible': false,
                    'front.visible': true,
                    'front.toggleable': true,                    
                    'front.reverse.flip': true,
                    'front.transparent': true,
                    'front.end': Math.PI * 0.7,
                    'front.color': 'rgba(0, 50, 50, 0.7)'
                });
                clipNode.setParent(shelf);
                clipNode.setFaceExpanded('front', true, true);
                dm.add(clipNode);                
                
                earth = new ht.Node();
                earth.setName('earth');
                earth.setIcon('earth');
                earth.s3(70, 70, 70);
                earth.p3(0, 50, 0);
                earth.s({
                    'shape3d': 'sphere',
                    'shape3d.image': 'earth'
                });
                earth.setHost(shelf);  
                earth.setParent(shelf);
                dm.add(earth);
                
                shelf.t3(-360, 0, 50);
                shelf.r3(0, Math.PI/7, 0);                               
            }            
            
            function initShelf3(){                
                var shelf = new ht.CSGNode();
                shelf.s3(120, 240, 120);
                shelf.p3(0, 120, 0);
                shelf.setName('shelf3');
                shelf.setIcon('ben');
                shelf.s({
                    'all.image': 'brick',
                    'all.uv.scale': [2, 4],
                    'top.uv.scale': [2, 2],
                    'bottom.uv.scale': [2, 2],                                                             
                    'csg.image': 'ben',
                    'csg.blend': 'yellow'
                });
                dm.add(shelf);
                
                photos = new ht.DoorWindow();
                photos.setName('DoorWindow-Photos');
                photos.setIcon('ben12');
                photos.s3(110, 100, 130);
                photos.p3(5, 180, 0);                
                photos.setHost(shelf);  
                photos.showMe = true;
                photos.s({                    
                    'bottom.uv': [1,1, 1,0, 0,0, 0,1],
                    'bottom.uv.scale': [1, 1],
                    'left.uv.scale': [3, 3],
                    'top.uv.scale': [2, 2],
                    'dw.s3': [0.8, 0.9, 0.05],
                    'dw.t3': [0, -5, 0],
                    'dw.axis': 'v',
                    'dw.toggleable': false,
                    'front.image': 'ben1',
                    'back.image': 'ben2',
                    'all.color': '#F8CE8B'
                });
                photos.setParent(shelf);
                dm.add(photos);
                
                var clipNode = new ht.CSGBox();
                clipNode.setName('CSGBox-Expand-Top');
                clipNode.s3(100, 100, 120);
                clipNode.p3(0, 65, 0.1);
                clipNode.setHost(shelf);
                clipNode.showMe = true;
                clipNode.s({                    
                    'all.visible': false,
                    'front.visible': true,
                    'front.color': 'red',
                    'front.transparent': true,
                    'front.opacity': 0.7,                    
                    'front.reverse.flip': true,
                    'front.toggleable': true,                                        
                    'front.axis': 'top',
                    'front.end': Math.PI * 0.4
                });
                clipNode.setParent(shelf);
                clipNode.setFaceExpanded('front', true, true);
                dm.add(clipNode);                
                                
                shelf.t3(360, 0, 50);
                shelf.r3(0, -Math.PI/7, 0);
                              
            }             
            
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>
